<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <script>
	 const host = window.location.host;
	 console.log(host);
         var socket
         if (!window.WebSocket) {
             window.WebSocket = window.MozWebSocket
         }
         if(window.WebSocket){
		 socket = new WebSocket("ws://"+host+"/ws")
             socket.onmessage = function(event){
                 var ta = document.getElementById('responseTest')
                 ta.value = ta.value + '\n' + event.data
             }
             socket.onopen = function(event) {
                 var ta = document.getElementById('responseTest')
                 ta.value = '连接开启!'
             }
             socket.onclose = function(event) {
                 var ta = document.getElementById('responseTest')
                 ta.value = '连接关闭!'
             }
         }else{
             alert('你的浏览器不支持WebSocket')
         }
         function send(message){
             if(!window.WebSocket){
                 return
             }
             if(socket.readyState === WebSocket.OPEN){
                 socket.send(message)
             }else{
                 alert('连接没有开启')
             }
         }
     </script>
     <form onsubmit="return false">
         <h3>WebSocket 聊天室：</h3>
         <textarea  id="responseTest" style="width: 500px;height: 300px;"></textarea>
         <br>
         <input type="text" name="message" style="width: 300px;" value="Welcome to woniuxy.com">
         <input type="button" value="发送消息" onclick="send(this.form.message.value)">
         <input type="button" value="清空聊天记录" onclick="javascript:document.getElementById('responseTest').value=''">
     </form>
 </body>
 </html>

